<template>
  <div title="左边分类栏">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>

    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" :isActive="myItem">
        <el-submenu v-for="(item) in category" :index="item" :key="item">
          <span slot="title">{{ item.themeName }}</span>
          <el-menu-item-group>
            <el-menu-item v-for="theme in item.categoryVos" :index="theme" :key="theme" @click="toTheme(theme)">{{ theme }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import {getAllCategory} from "@/api/category";

export default {
  name: "sideBar",
  data(){
    return{
      category:[],
      isCollapse: true,
      myItem:''
    }
  },
  created(){
    this.toRefresh()
  },
  methods: {
  toRefresh(){
    getAllCategory().then((res)=>{
      this.category=res.data.data.allTheme
      console.log(this.category)
    })
  },
    toTheme(id) {
    this.$emit('toHideTopMenu','发送一条隐藏信息')
//   直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: `/articles/${id}`,
      })
  }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.el-menu-item {
  background-color: #b3d4fc  !important;
  height: 44px;
}
.el-menu-item:hover{
  outline: 0 !important;
  color: #409EFF !important;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #409EFF !important;
  font-weight: bold !important;
}

.el-submenu{
  text-align: left;
}
.el-submenu__title:focus, .el-submenu__title:hover{
  outline: 0 !important;
  color: rgba(3,17,26,0.5) !important;
  background: none !important;
}
</style>
